<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElNotification } from 'element-plus';
import filterComponent from '../../components/filterComponent.vue';
import Task from '../../apis/Task';
import columns from '../../utils/Selectcolumns';
import { getTaskCategoryMapping } from '../../utils/mapping';
import PaginationComponent from '../../components/pageHelper.vue';

const { t } = useI18n();
const tableData = ref([]);
const totalItems = ref(0);
const itemsPerPage = ref(10);
const currentPage = ref(1);

// 格式化数据
const taskStatusMap = {
  0: t('pendingReview'),
  1: t('pendingAcceptance'),
  2: t('inProgress'),
  3: t('underEvaluation'),
  4: t('completed'),
};
const taskCategoryMap = getTaskCategoryMapping();

const formTaskData = (data) => {
  return data.map((item) => ({
    ...item,
    taskCategory: taskCategoryMap[item.taskCategory] || t('unknownCategory'),
    taskStatus: taskStatusMap[item.taskStatus] || t('unknownStatus'),
  }));
};

// 获取数据
const fetchData = async () => {
  try {
    const response = await Task.getTaskSelect({
      currentPage: currentPage.value,
      pageSize: itemsPerPage.value,
    });
    if (response.data == null) {
      throw new Error(t('noMatchingData'));
    }
    tableData.value = formTaskData(response.data);
    totalItems.value = response.total;
  } catch (error) {
    ElNotification({
      title: t('error'),
      message: error.message,
      type: 'error',
    });
  }
};

onMounted(() => {
  fetchData();
});

// 处理筛选
const handleFilter = async (filterdata) => {
  const updatedFilterData = {
    ...filterdata,
    currentPage: 1,
    pageSize: itemsPerPage.value,
  };
  try {
    const response = await Task.getTaskSelect(updatedFilterData);
    if (response == null) {
      throw new Error(t('noMatchingData'));
    }
    tableData.value = formTaskData(response.data);
    totalItems.value = response.total;
    currentPage.value = 1;
  } catch (error) {
    ElNotification({
      title: t('tips'),
      message: error.message,
      type: 'info',
    });
  }
};

const handleDataChange = ({ tableData: data, totalItems: total }) => {
  tableData.value = formTaskData(data);
  totalItems.value = total;
};

const handleCurrentPageChange = (page) => {
  currentPage.value = page;
  fetchData();
};
</script>

<template>
  <div class="common-layout">
    <el-card class="filter-card" :key="'filter-card'">
      <filter-component @filter="handleFilter" style="width: 100%" />
    </el-card>
    <el-card class="table-card" :key="'table-card'">
      <div>
        <el-table :data="tableData" style="width: 100%" border="true">
          <el-table-column
            v-for="(column, index) in columns"
            :key="index"
            :label="$t(column.labelKey || column.label)"
            :prop="column.props"
            :min-width="column.minWidth || 120"
            :fixed="column.fixed ? column.fixed : null"
          >
          </el-table-column>
        </el-table>
      </div>
      <PaginationComponent
        :totalItems="totalItems"
        :itemsPerPage="itemsPerPage"
        :currentPage="currentPage"
        @dataChange="handleDataChange"
        @currentChange="handleCurrentPageChange"
      />
    </el-card>
  </div>
</template>

<style scoped lang="less">
.common-layout {
  margin-top: -20px;
  padding: 20px;
}

.filter-card {
  margin-bottom: 10px;
  padding: 5px;
  background-color: #fff; /* 确保筛选框有清晰的背景 */
}

.table-card {
  padding: 20px;
  background-color: #fff;
}

.el-table {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th,
.el-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.el-table .cell {
  word-wrap: break-word;
  white-space: normal;
}
</style>
